-
Notifications
You must be signed in to change notification settings - Fork 355
(frontend) fix callout block navigation issues & styles #1161
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
(frontend) fix callout block navigation issues & styles #1161
Conversation
Hey ! Thanks for the follow up @ZouicheOmar |
dbe7d34
to
32230a0
Compare
Also added tests. |
32230a0
to
3d4944a
Compare
3d4944a
to
8fa0b8a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the contribution. 🎉
Some returns.
$height="28px" | ||
$width="28px" | ||
$minWidth="28px" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If $width
is set $minWidth
is not necessary.
$minWidth="28px" |
<Box | ||
as="p" | ||
className="inline-content" | ||
ref={contentRef} | ||
$css={css` | ||
& > div { | ||
padding-top: 2px; | ||
} | ||
`} | ||
/> | ||
</Box> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah yes well seen, I think $justify="center"
will be more appropriate.
I can see as well in the dom that it is a "p" tag that is wrapping a "div" tag, I don't think it is correct, better to let it as a div
so (default tag).
<Box | |
as="p" | |
className="inline-content" | |
ref={contentRef} | |
$css={css` | |
& > div { | |
padding-top: 2px; | |
} | |
`} | |
/> | |
</Box> | |
<Box | |
className="inline-content" | |
ref={contentRef} | |
$justify="center" | |
/> | |
</Box> |
@@ -125,6 +125,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { | |||
}, | |||
uploadFile, | |||
schema: blockNoteSchema, | |||
disableExtensions: ['gapCursor'], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't see the bug actually, could you provide a image or a small video of it ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Demo
Screencast.from.2025-07-23.16-33-36.mp4
Here's what it looks like with the extension enabled. When the cursor goes above or between callouts, a GapCursor instance is added.
The extension comes with tiptap, yet it's not used by any of the Docs blocks.
On the blocknotejs docs
Screencast.from.2025-07-10.16-18-52.mp4
Updated the callout block styles, centered the emoji and aligned the text to be in the center of the block.
Disabled the "gapCursor" prosemirror extension on the editor. Cursor gets to non text positions around custom blocks, in this case the callout block, which is a feature of the "gapCursor" extension.
8fa0b8a
to
ebffb65
Compare
Purpose
When using the callout block, the cursor gets in non text positions, which is due to the
"GapCursor" prosemirror extension. This extension is not used by docs.
By disabling "gapCursor" on the editor, cursor and arrow navigation behave as expected.
This PR also updates minor styles for the callout block.
Proposal